<!--新朋友-->
<script>
import { confirmOrRejectFriend, getRequestHistoryList, getRequestList } from '@/api/chat/friendRequest'

export default {
  name: '',
  data() {
    return {
      //好友申请列表
      friendNewList: [],
      //历史好友请求
      friendHistoryList: []
    }
  },
  methods: {
    getFriendNew() {
      this.friendNewList = []
      this.friendHistoryList = []

      getRequestList().then(({data}) => {
        data.forEach(item => {
          console.log(item)

          //如果是没有同意和拒绝的好友请求放在friendNewList,如果拒绝或者已同意的放在friendHistoryList
          if (item.status === "Pending") {

            this.friendNewList.push(item)
          }
        })
      })
    },

    /**
     * 获取历史请求 拒绝和已同意
     */
    getFriendHistory(){

      getRequestHistoryList().then(({data})=>{
        this.friendHistoryList = data
      })

    },

    /**
     * 同意请求
     * @param reqId
     * @param status
     */
    confirmOrRejectFriend(reqId, status) {

      const param = {
        status,
        reqId
      }

      confirmOrRejectFriend(param).then(({data}) => {
        console.log('res data ', data)

        //重新查询
        this.getFriendNew()
        this.getFriendHistory()
      })

    }

  },
  created() {
    this.getFriendNew()
    this.getFriendHistory()
  }
}
</script>

<template>
  <div>
    <van-divider
      :style="{ color: '#fa19ba', borderColor: '#fa19e7', padding: '0 16px' }"
    >
      新朋友
    </van-divider>
    <div class="newFriend">
      <el-card v-for="(item,index) in friendNewList" :key="index" :body-style="{ padding: '0px' }">

        <el-row>
          <!--左侧头像区域-->
          <el-col :span="6">
            <img
              :src="item.avatar"
              class="headImg"
            >
          </el-col>
          <!--右侧昵称和信息预览-->
          <el-col :span="10">
            <!--          <div class="nickName"> 张三 (18733741939)</div>-->
            <div class="nickName"> {{ item.nickName }} ({{ item.phonenumber }})</div>
            <!-- 操作按钮 -->
            <br>
            <div class="operation">
              <p>{{ item.remark }}</p>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="operation">
              <van-button class="btn" @click="confirmOrRejectFriend(item.reqId,'Confirmed')" plain hairline
                          type="primary">
                同意
              </van-button>
              <van-button class="btn" @click="confirmOrRejectFriend(item.reqId,'Rejected')" plain hairline
                          type="danger">拒绝
              </van-button>
            </div>
          </el-col>

        </el-row>

      </el-card>
      <van-empty v-if="friendNewList.length===0" description="没有新的好友请求哦~"/>

    </div>

    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      历史请求
    </van-divider>
    <!--    历史好友申请-->
    <div class="history">
      <el-card v-for="(item,index) in friendHistoryList" :key="index" :body-style="{ padding: '0px' }">

        <el-row>
          <!--左侧头像区域-->
          <el-col :span="6">
            <img
              :src="item.avatar"
              class="headImg"
            >
          </el-col>
          <!--右侧昵称和信息预览-->
          <el-col :span="10">
            <!--          <div class="nickName"> 张三 (18733741939)</div>-->
            <div class="nickName"> {{ item.nickName }} ({{ item.phonenumber }})</div>
            <!-- 操作按钮 -->
            <br>
            <div class="operation">
              <p>{{ item.remark }}</p>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="operation">
              <p>{{ item.relationStatusName }}</p>
            </div>
          </el-col>

        </el-row>

      </el-card>
    </div>

  </div>
</template>

<style>

.operation {
  color: #666;
  font-size: 14px;
}

.el-row {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.btn {
  height: 4vh;
  margin-right: 5px;
}

.headImg {
  width: 70px;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

</style>
